<template>
  <div class="then">
    <p class="then_home">首页</p>
    <el-row :gutter="10">
      <el-col :xs="24" :sm="24" :md="8">
        <div class="grid-content bg-p1 animated rotateIn">{{this.then.orderCount}}
          
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :md="8">
        <div class="grid-content bg-p2 animated rubberBand">{{this.then.productCount}}
          
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :md="8">
        <div class="grid-content bg-p3 animated wobble">{{this.then.userCount}}
          
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      then: [],
    };
  },
  mounted() {
    this.$network.getHome().then((res) => {
      console.log(res.data.data);
      this.then = res.data.data;
    });
  },
};
</script>

<style scoped lang="scss">
@import "@/scss/index.scss";
.el-col {
  border-radius: 5px;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.then_home{
  @include FontSize(20px)
}
.bg-p1:hover,
.bg-p2:hover,
.bg-p3:hover {
  @include Size(85%, 160px);
  font-size: 80px;
  color: #000;
}
.bg-p1,
.bg-p2,
.bg-p3 {
  @include Size(80%, 150px);
  @include FontOnly(50px);
  margin: 10px auto;
  color: #eee;
  text-align: center;
  line-height: 150px;
}
.bg-p1 {
  background-color: orange;
}
.bg-p2 {
  background-color: skyblue;
}
.bg-p3 {
  background-color: greenyellow;
}
</style>